<template>
	<div class="system-user-container">
		<el-card class="box-card">
			<!-- 搜索 -->
			<div>
				<div class="my_btn_lay">
					<div class="my_flex my_btn" @click="searchEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--search"></i>
							<span>查找</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="resetEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--refresh"></i>
							<span>重置</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="addDefaultBlank">
						<div class="my_flex_layout">
							<i class="vxe-icon--plus"></i>
							<span>新增</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="deleteTable">
						<div class="my_flex_layout">
							<i class="fa fa-trash-o"></i>
							<span>删除</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="funnelEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--download"></i>
							<span>导出</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="printTab">
						<div class="my_flex_layout">
							<i class="vxe-icon--print"></i>
							<span>打印</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="addTypeBtn">
						<div class="my_flex_layout">
							<i class="vxe-icon--edit-outline"></i>
							<span>付款方式</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="addUnit">
						<div class="my_flex_layout">
							<i class="el-icon-folder-opened"></i>
							<span>添加单位</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="showAmendFun">
						<div class="my_flex_layout">
							<i class="el-icon-edit"></i>
							<span>编辑</span>
						</div>
					</div>
					<div class="my_flex my_btn ml20" @click="editClosedEvent">
						<div class="my_flex_layout">
							<i class="el-icon-folder-add"></i>
							<span>保存</span>
						</div>
					</div>
				</div>

				<vxe-form :data="selectFrom" title-align="left" prevent-submit title-colon>
					<vxe-form-item title="单位名称" field="tiunitNameme" span="6" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.tiunitNameme" placeholder="请选择单位名称" @change="change_unitName">
								<el-option v-for="item in selectFrom.unitsData" :key="item.id" :label="item.unitName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<vxe-form-item title="项目名称" field="type" span="6" :item-render="{}">
						<template #default="{ data }">
							<el-select style="width: 100%" clearable filterable v-model="data.projectDataValue" placeholder="请选择项目名称">
								<el-option v-for="item in selectFrom.projectData" :key="item.id" :label="item.contractName" :value="item.id"> </el-option>
							</el-select>
						</template>
					</vxe-form-item>

					<!-- <vxe-form-item align="right" span="24" collapse-node>
						<template #default>
							<vxe-button status="primary" content="搜索" @click="searchEvent"></vxe-button>
							<vxe-button content="重置" @click="resetEvent"></vxe-button>
						</template>
					</vxe-form-item> -->
				</vxe-form>
			</div>
			<!-- <el-row :gutter="20" justify="center">
				<el-col class="iemt_pad" :span="6" style="text-align: center"> 工程代扣管理费用明细表（B类）</el-col>
			</el-row> -->

			<el-row :gutter="20" justify="space-between">
				<el-col class="iemt_pad" :span="6"> 付款单位：{{ selectFrom.title.contractUnit }} </el-col>
				<el-col class="iemt_pad" :span="6" style="text-align: center"> 工程造价：{{ selectFrom.title.contractMoney }}</el-col>
				<el-col class="iemt_pad" :span="6" style="text-align: right"> 合作单位：{{ selectFrom.title.partner }}</el-col>
			</el-row>
			<el-row :gutter="20" justify="space-between">
				<el-col class="iemt_pad" :span="6"> 项目名称：{{ selectFrom.title.contractName }} </el-col>
				<el-col class="iemt_pad" :span="6" style="text-align: right"> 经办人：{{ selectFrom.title.projectManager }} </el-col>
			</el-row>

			<!-- <vxe-toolbar ref="xToolbar" custom>
				<template #buttons>
					<vxe-button disabled type="text" icon="fa fa-plus" content="新增" @click="addDefaultBlank"></vxe-button>
					<vxe-button type="text" icon="fa fa-trash-o" content="删除" @click="deleteTable"></vxe-button>
				</template>
				<template #tools>
					<vxe-button type="text" icon="vxe-icon--print" class="tool-btn" @click="printTab"></vxe-button>
					<vxe-button type="text" icon="vxe-icon--download" class="tool-btn" @click="funnelEvent"></vxe-button>
				</template>
			</vxe-toolbar> -->
			<!-- @edit-closed="editClosedEvent" -->
			<vxe-table
				ref="xTable1"
				:scroll-x="{ enabled: false }"
				:scroll-y="{ enabled: false }"
				border
				keep-source
				:export-config="{}"
				height="600"
				align="center"
				resizable
				show-overflow
				:data="tableData"
				class="mytable-style"
				:row-class-name="rowClassName"
				:edit-config="{ trigger: 'manual', mode: 'row', icon: 'false' }"
				@checkbox-all="selectAllChangeEvent1"
				@checkbox-change="selectChangeEvent1"
				show-footer
				:edit-rules="validRules"
				:footer-method="footerMethod"
			>
				<vxe-column align="center" type="checkbox" fixed="left" width="60"></vxe-column>
				<vxe-column align="center" type="seq" title="序号" width="60"></vxe-column>

				<vxe-column
					width="105"
					field="time"
					title="日期"
					:edit-render="{ name: '$input', placeholder: '请选择日期', props: { type: 'date', placeholder: '请选择日期' } }"
				></vxe-column>
				<vxe-colgroup title="发票金额" align="center">
					<vxe-column width="100" field="amount" title="金额" :edit-render="{ name: 'input', attrs: { type: 'text', disabled: true } }">
						<template v-slot="{ row }">{{ transitionNumber(row.amount) }}</template>
					</vxe-column>
					<vxe-column width="100" field="totalVat" title="销项" :edit-render="{ name: 'input', attrs: { type: 'text', disabled: true } }">
						<template v-slot="{ row }">{{ transitionNumber(row.totalVat) }}</template>
					</vxe-column>
				</vxe-colgroup>
				<vxe-colgroup title="甲方付款" align="center">
					<!-- 更改 -->
					<vxe-column width="100" field="ticket" title="票据" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
						<!-- <template v-slot="{ row }">{{ transitionNumber(row.ticket) }}</template> -->
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.ticket" @change="change_managementFee(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.ticket) }}</template>
					</vxe-column>
					<vxe-column width="100" field="bankTransfer" title="银行转账" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
						<!-- <template v-slot="{ row }">{{ transitionNumber(row.bankTransfer) }}</template> -->
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.bankTransfer" @change="change_managementFee(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.bankTransfer) }}</template>
					</vxe-column>
				</vxe-colgroup>

				<vxe-column width="110" field="monthProgress" title="甲方确认产值" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					<!-- <template v-slot="{ row }">{{ transitionNumber(row.monthProgress) }}</template> -->

					<template v-slot:edit="scope">
						<el-input v-model="scope.row.monthProgress" @change="change_selValue_Tax(scope.row)"></el-input>
					</template>
					<template v-slot="{ row }">{{ transitionNumber(row.monthProgress) }}</template>
				</vxe-column>

				<vxe-colgroup title="公司扣款" align="center">
					<!-- <vxe-colgroup width="130" field="stampDuty" title="印花税" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					</vxe-colgroup> -->

					<vxe-column width="100" field="stampDuty" title="印花税" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.stampDuty" @change="change_addnote(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.stampDuty) }}</template>
					</vxe-column>

					<!-- <vxe-colgroup
						width="130"
						field="managementFee"
						title="技术咨询费及管理费14%"
						align="center"
						:edit-render="{ name: 'input', attrs: { type: 'text' } }"
					>
					</vxe-colgroup> -->
					<vxe-column width="100" field="managementFee" title="服务咨询费" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.managementFee" @change="change_addnote(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.managementFee) }}</template>
					</vxe-column>

					<!-- <vxe-colgroup width="130" field="tax" title="所得税1%" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					</vxe-colgroup> -->

					<vxe-column width="100" field="tax" title="所得税1%" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.tax" @change="change_addnote(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.tax) }}</template>
					</vxe-column>

					<!-- <vxe-colgroup width="130" field="vat" title="增值税及附加" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					</vxe-colgroup> -->

					<vxe-column width="110" field="vat" title="增值税及附加" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.vat" @change="change_addnote(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.vat) }}</template>
					</vxe-column>

					<!-- <vxe-colgroup width="130" field="other" title="其他" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					</vxe-colgroup> -->

					<vxe-column width="100" field="other" title="其他" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.other" @change="change_addnote(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.other) }}</template>
					</vxe-column>

					<!-- <vxe-colgroup width="130" field="totalDeductions" title="扣款小计" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					</vxe-colgroup> -->

					<vxe-column width="100" field="totalDeductions" title="扣款小计" :edit-render="{ name: 'input' }">
						<template v-slot:edit="scope">
							<el-input v-model="scope.row.totalDeductions" @change="change_selValue_payable(scope.row)"></el-input>
						</template>
						<template v-slot="{ row }">{{ transitionNumber(row.totalDeductions) }}</template>
					</vxe-column>
				</vxe-colgroup>
				<vxe-colgroup title="已提供发票" align="center">
					<vxe-column width="100" field="costTicket" title="成本票" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
						<template v-slot="{ row }">{{ transitionNumber(row.costTicket) }}</template>
					</vxe-column>

					<vxe-column width="100" field="inputTax" title="进项税额" align="center" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
						<template v-slot="{ row }">{{ transitionNumber(row.inputTax) }}</template>
					</vxe-column>
				</vxe-colgroup>
				<vxe-column width="100" field="payable" title="应付款" :edit-render="{ name: 'input' }">
					<!-- <template v-slot="{ row }">{{ transitionNumber(row.payable) }}</template> -->
					<template v-slot:edit="scope">
						<el-input v-model="scope.row.payable"></el-input>
					</template>
					<template v-slot="{ row }">{{ transitionNumber(row.payable) }}</template>
				</vxe-column>
				<vxe-column width="100" field="thisPayment" title="本次付款" :edit-render="{ name: 'input', attrs: { type: 'text' } }">
					<template v-slot="{ row }">{{ transitionNumber(row.thisPayment) }}</template>
				</vxe-column>
				<!-- <vxe-column width="130" field="paymentUnit" title="付款单位" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column> -->

				<vxe-column width="100" field="paymentUnitId" title="付款单位" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.paymentUnitId">
							<el-option v-for="item in selectFrom.playTypeData" :key="item.id" :label="item.unitName" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel_paymentUnit(row.paymentUnitId, selectFrom.playTypeData) }}</template>
				</vxe-column>

				<!-- <vxe-column field="type" title="付款类型" :edit-render="{ name: '$select', options: plyArry }"></vxe-column> -->

				<vxe-column width="100" field="type" title="付款类型" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-select clearable filterable v-model="scope.row.type" @change="change_contractName">
							<el-option v-for="item in playTypeFrom.shoWData" :key="item.name" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getSelectLabel(row.type, playTypeFrom.shoWData) }}</template>
				</vxe-column>

				<vxe-column width="100" field="remarks" title="备注" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
			</vxe-table>

			<!-- 备忘录 -->
			<el-input v-model="textarea" :rows="2" @change="blur_change" class="mt10" type="textarea" placeholder="请添加备忘录信息" />

			<!-- remarks -->
			<!-- <div>
				<el-row :gutter="20" justify="space-between">
					<el-col class="iemt_pad" :span="6"> 审批：?</el-col>
					<el-col class="iemt_pad" :span="6"> 复核：</el-col>
					<el-col class="iemt_pad" :span="6"> 出纳：</el-col>
				</el-row>
				<el-row :gutter="20" justify="space-between">
					<el-col class="iemt_pad" :span="6"> 制表人：</el-col>
					<el-col class="iemt_pad" :span="6"> 收款人：</el-col>
				</el-row>
			</div> -->
		</el-card>
		<!-- 跳转 -->
		<vxe-modal v-model="dialog.isShow" title="跳转提示">
			<template #default>
				<div>默认尺寸</div>
				<vxe-button type="submit" status="primary">提交</vxe-button>
				<vxe-button type="reset">取消</vxe-button>
			</template>
		</vxe-modal>

		<!-- 类型弹窗 -->
		<vxe-modal v-model="playTypeFrom.isshow" title="付款类型" width="600" height="420" show-zoom resize remember>
			<template #default>
				<vxe-toolbar perfect>
					<template #buttons>
						<vxe-button icon="fa fa-plus" status="perfect" content="新增" @click="addShow"></vxe-button>
						<vxe-button icon="fa fa-trash-o" status="perfect" content="删除" @click="deleteTable_show"></vxe-button>
					</template>
				</vxe-toolbar>
				<vxe-table
					border
					:height="300"
					show-overflow
					ref="xTableShow"
					:data="playTypeFrom.shoWData"
					:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
					@checkbox-all="selectAllChangeEvent1_show"
					@checkbox-change="selectChangeEvent1_show"
					@edit-closed="editClosedEvent_show"
				>
					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
					<vxe-column type="seq" width="60" align="center"></vxe-column>
					<vxe-column field="name" title="付款类型" :edit-render="{ name: 'input' }"></vxe-column>
				</vxe-table>
			</template>
		</vxe-modal>
		<!-- 新增通讯录弹窗 -->
		<vxe-modal v-model="isaddressBook" title="添加通讯录" width="800" height="400" show-zoom resize remember>
			<template #default>
				<vxe-form :data="ressBookFrom" :rules="validRulesAddbook" title-align="right" title-width="110">
					<vxe-form-item
						title="单位名称"
						field="unitName"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '单位名称' } }"
					></vxe-form-item>

					<vxe-form-item
						title="纳税人识别号"
						field="taxpayerNum"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '纳税人识别号' } }"
					></vxe-form-item>

					<vxe-form-item
						title="地址电话"
						field="addressPhone"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '地址电话' } }"
					></vxe-form-item>

					<vxe-form-item
						title="联系人"
						field="contactPerson"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '联系人' } }"
					></vxe-form-item>

					<vxe-form-item
						title="联系电话1"
						field="phone1"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '联系电话1' } }"
					></vxe-form-item>

					<vxe-form-item
						title="联系电话2"
						field="phone2"
						span="12"
						:item-render="{ name: 'input', attrs: { placeholder: '联系电话2' } }"
					></vxe-form-item>

					<vxe-form-item title="QQ号" field="qq" span="12" :item-render="{ name: 'input', attrs: { placeholder: 'QQ号' } }"></vxe-form-item>

					<vxe-form-item title="联系地址" field="addr" span="12" :item-render="{ name: 'input', attrs: { placeholder: '联系地址' } }"></vxe-form-item>

					<!-- <vxe-form-item title="单位类型" field="type" span="12" :item-render="{ name: 'input', attrs: { placeholder: '单位类型' } }"></vxe-form-item> -->

					<vxe-form-item title="单位类型" field="type" span="12" :item-render="{}" title-overflow>
						<template #default="params">
							<vxe-select v-model="params.data.type" placeholder="单位类型" clearable>
								<vxe-option value="1" label="供应商"></vxe-option>
								<vxe-option value="2" label="客户"></vxe-option>
								<vxe-option value="3" label="公司员工"></vxe-option>
								<vxe-option value="4" label="合作伙伴"></vxe-option>
							</vxe-select>
						</template>
					</vxe-form-item>

					<vxe-form-item align="center" span="24">
						<template #default>
							<vxe-button type="submit" status="primary" @click="showSubmit">保 存</vxe-button>
							<vxe-button @click="isaddressBook = false">取消</vxe-button>
						</template>
					</vxe-form-item>
				</vxe-form>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, toRaw, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { VxeTablePropTypes, VXETable } from 'vxe-table';
import { useRouter } from 'vue-router';

import {
	axios_paymentselList,
	axios_deletepaymentDetail,
	axios_deletepaymentup,
	axios_Addepayment,
	axios_payList,
	axios_payadd,
	axios_payup,
	axios_paydel,
	axios_calculate_add, //计算扣款小记
	axios_selValue_management,
	axios_selValue_Tax, //所得税
	axios_selValue_payable, //应付款
	axios_saveTxt, //存储通讯录备忘录
} from '/@/api/basicsUrl/index';
import { axios_selListByContractUnitId } from '/@/api/customerDetails/index';
import { axios_SelList } from '/@/api/basicsUrl/index';
import { GenNonDuplicateID } from '/@/utils/formatTime';
import { stat } from 'fs';

import { transitionNumber } from '/@/utils/transitionNumber';
import { axios_contactsAdd } from '/@/api/addressBook/index';

export default {
	name: 'PaymentDetail',
	setup() {
		const router = useRouter();
		const xTable1 = ref({} as VxeTableInstance);
		const xToolbar = ref({} as VxeToolbarInstance);

		const validRules = ref({
			time: [{ required: true, message: '日期必填' }],
		} as VxeTablePropTypes.EditRules);

		// 默认空白行数据
		let defaultBlankData = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				time: '',
				amount: '', //金额
				totalVat: '', //销项
				ticket: '', //票据：
				bankTransfer: '', //银行转账：
				monthProgress: '', //甲方确认产值
				stampDuty: '', //印花税
				managementFee: '', //技术咨询费及管理费14
				tax: '', //所得税1
				vat: '', //增值税及附加
				other: '', //other其他
				totalDeductions: '', //扣款小计
				costTicket: '', //成本票
				inputTax: '', //进项税额
				payable: '', //应付款
				thisPayment: '', //本次付款
				paymentUnit: '', //付款单位
				type: '', //付款类型
				remarks: '', //备注
			},
		];

		let defaultPlayDataShow = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				name: '', //付款类型
			},
		];

		// 通讯录验证
		const validRulesAddbook = ref({
			bankId: [{ required: true, message: '银行必选' }],
			time: [{ required: true, message: '时间必选' }],
			unitName: [{ required: true, message: '单位名称必填' }],
			taxpayerNum: [{ required: true, message: '纳税人识别号必填' }],
			type: [{ required: true, message: '单位类型必填' }],
			contactPerson: [{ required: true, message: '联系人必填' }],

			// receiveId: [{ required: true, message: '到款单位必选' }],
			// contractId: [{ required: true, message: '项目必选' }],
		} as VxeTablePropTypes.EditRules);

		const state: any = reactive({
			textarea: '', //备忘录
			addList: [], //前端加的数据
			responseData: [], //后端返回的数据
			selectFrom: {
				// printData: {}, //打印数据
				tiunitNameme: '', //单位名称穿ID
				unitsData: [], //单位搜索的数据和联系人一样
				playTypeData: [], //付款单位
				projectDataValue: '', //项目数据
				projectData: [], //项目数据

				title: {
					contractName: '',
					contractMoney: '',
					projectManager: '',
					contractUnit: '',
					amount: 0,
					totalVat: 0,
					ticket: 0,
					bankTransfer: 0,
					monthProgress: 0,
					stampDuty: 0,
					managementFee: 0,
					tax: 0,
					vat: 0,
					other: 0,
					totalDeductions: 0,
					costTicket: 0,
					inputTax: 0,
					payable: 0,
					thisPayment: 0,
				}, //标题内容
			},
			tableData: [],
			selectTableData: [], //选择的数组
			plyArry: [
				{ label: '工程款', value: 1 },
				{ label: '借款', value: 2 },
				{ label: '利息', value: 3 },
			],
			dialog: {
				isShow: false,
				toType: '2', //借款
			},
			// 付款方式弹窗
			playTypeFrom: {
				isshow: false, //弹窗控制
				shoWData: [], //表格数据
				selectData: [], //多选的数据
			},
			// 新增公共20221.18 添加单位
			//通讯录弹窗
			isaddressBook: false, //通讯路弹窗
			ressBookFrom: {
				unitName: '', //单位名称
				taxpayerNum: '', //纳税人识别号
				addressPhone: '', //地址电话
				// accountBank: '',//联系人
				// bankAccount: '',
				// bankName: '',
				contactPerson: '', //联系人
				phone1: '',
				phone2: '',
				qq: '',
				addr: '', //联系地址
				type: '', //单位类型
			},
		});

		// 打印样式
		// 打印样式
		const printStyle = `
            .title {
              text-align: center;
            }
            .my-list-row {
              display: inline-block;
              width: 100%;
            }
            .my-list-col {
              float: left;
              width: 33.3%;
			  			// text-align: center;
              height: 28px;
              line-height: 28px;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
            }
						.my-cent{
							  text-align: center;
						}
						.my-right{
							  text-align: right;
						}
			 	  	.my-list-col-btn {
							float: left;
              width: 20%;
              height: 28px;
              line-height: 28px;
							text-align: left;
            }
            .my-top,
            .my-bottom {
              font-size: 12px;
            }
            .my-top {
              margin-bottom: 5px;
            }
            .my-bottom {
              margin-top: 30px;
              text-align: right;
            }
            `;

		// 打印底部内容模板

		const bottomHtml = `
            <div class="my-bottom">
              <div class="my-list-row">
                <div class="my-list-col-btn">审批：</div>
                <div class="my-list-col-btn">复核：</div>
                <div class="my-list-col-btn">出纳： </div>
                <div class="my-list-col-btn">制表人：</div>
                <div class="my-list-col-btn">收款人：</div>
              </div>
            </div>
            `;

		// 方法

		/**
		 * @Author: lilin_:）
		 * @name: 获取单位名称
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const getClientSelList = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '2' });
			state.selectFrom.unitsData = resData.obj;
			// console.log(resData, '单位名称');
		};

		/**
		 * @Autor: lilin_:）
		 * @description: 获取付款单位
		 * @param {*}
		 * @return {*}
		 */
		const getPlayTypeData = async () => {
			let resData: any = await axios_SelList({ unitName: '', contactPerson: '', type: '' });
			state.selectFrom.playTypeData = resData.obj;
			// console.log(resData, '单位名称');
		};

		/**
		 * @Author: lilin_:）
		 * @name:
		 * @Descripttion:切换单位名称事件
		 * @param {*} value
		 * @return {*}
		 */
		const change_unitName = async (value: any) => {
			let { obj } = await axios_selListByContractUnitId({
				contractUnitId: value,
			});
			state.selectFrom.projectDataValue = '';
			state.selectFrom.projectData = obj;
		};

		const sexList2 = ref([
			{ label: '', value: '' },
			{ label: '男', value: '1' },
			{ label: '女', value: '0' },
		]);

		/**
		 * @Author: lilin_:）
		 * @name: 获取付款明细
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const getpaymentselList = async () => {
			let { code, obj, data }: any = await axios_paymentselList({
				contractId: state.selectFrom.projectDataValue,
				// contractId: '4',
			});
			if (code == 200) {
				// 重置数据
				state.addList = [];
				// 添加20条数据
				for (let index = 0; index < 20; index++) {
					state.addList.push(
						defaultBlankData.map((item: any) => {
							return {
								...item,
								...{
									webid: GenNonDuplicateID(),
								},
							};
						})[0]
					);
				}
				// 存储数组索引
				state.responseData = obj;
				state.tableData = [...state.responseData, ...state.addList];
				state.selectFrom.title = data;
				state.selectTableData = [];
				// 存储记事本
				state.textarea = data.text;
			}

			// console.log(printData, 'data');
			// console.log(printData.contractUnit, 'data');
		};

		const selectAllChangeEvent1: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			state.selectTableData = records;
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
		};

		const selectChangeEvent1: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			// 重置所有高亮
			state.tableData.forEach((item2: any) => {
				item2.hghligHt = false;
			});
			state.selectTableData = records;
			console.log(checked ? '勾选事件' : '取消事件', records);
			state.selectTableData.forEach((item: any) => {
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item2: any) => {
						if (item.webid == item2.webid) {
							item2.hghligHt = true;
						}
					});
				} else {
					state.tableData.forEach((item2: any) => {
						if (item.id == item2.id) {
							item2.hghligHt = true;
						}
					});
				}
			});
		};

		const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
			return [
				columns.map((column, columnIndex) => {
					// console.log(columnIndex, '1');

					if (columnIndex === 2) {
						return '合计';
					}
					if (columnIndex === 3) {
						return `${state.selectFrom.title.amount}`;
					}
					if (columnIndex === 4) {
						return `${state.selectFrom.title.totalVat}`;
					}
					if (columnIndex === 5) {
						return `${state.selectFrom.title.ticket}`;
					}
					if (columnIndex === 6) {
						return `${state.selectFrom.title.bankTransfer}`;
					}

					if (columnIndex === 7) {
						return `${state.selectFrom.title.monthProgress}`;
					}
					// 印花税收、
					if (columnIndex === 8) {
						return `${state.selectFrom.title.stampDuty}`;
					}
					// 技术咨询费
					if (columnIndex === 9) {
						return `${state.selectFrom.title.managementFee}`;
					}
					if (columnIndex === 10) {
						return `${state.selectFrom.title.tax}`;
					}
					if (columnIndex === 11) {
						return `${state.selectFrom.title.vat}`;
					}
					// 其他
					if (columnIndex === 12) {
						return `${state.selectFrom.title.other}`;
					}
					if (columnIndex === 13) {
						return `${state.selectFrom.title.totalDeductions}`;
					}
					// 成本
					if (columnIndex === 14) {
						return `${state.selectFrom.title.costTicket}`;
					}
					// 进项
					if (columnIndex === 15) {
						return `${state.selectFrom.title.inputTax}`;
					}
					if (columnIndex === 16) {
						return `${state.selectFrom.title.payable}`;
					}
					if (columnIndex === 17) {
						return `${state.selectFrom.title.thisPayment}`;
					}
					return '';
				}),
			];
		};

		// 改变颜色样式
		const rowClassName: VxeTablePropTypes.RowClassName = ({ row }) => {
			// console.log(row, 'rowIndex');
			if (row.hghligHt) {
				return 'row-green';
			}
			return null;
		};

		onMounted(() => {
			getClientSelList();
			getPlayTypeData(); //付款单位获取
			getType();
			// getProjectData(); //项目名称
			// let a = GenNonDuplicateID()
			// console.log(a)
		});

		/**
		 * @Author: lilin_:）
		 * @name:
		 * @Descripttion: 搜索
		 * @param {*}
		 * @return {*}
		 */
		const searchEvent: VxeFormEvents.Submit = async () => {
			// VXETable.modal.message({ content: '查询事件', status: 'info' });
			// await getClientSelList_user();
			getpaymentselList();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 重置搜索表单
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const resetEvent: VxeFormEvents.Reset = async () => {
			state.selectFrom.projectDataValue = ''; //项目名称
			state.selectFrom.projectData = []; //清空项目数据
			state.selectFrom.tiunitNameme = ''; //单位id
			getpaymentselList();
			// VXETable.modal.message({ content: '重置事件', status: 'info' });
		};

		/**
		 * @Author: lilin_:）
		 * @name: 高级导出功能
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const funnelEvent = () => {
			const $table = xTable1.value;
			$table.openExport();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 打印表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const printTab = () => {
			const $table = xTable1.value;
			$table.print({
				sheetName: '付款明细',
				style: printStyle, //自定义样式
				columns: [
					{ type: 'seq' },
					{ field: 'time' },
					{ field: 'amount' },
					{ field: 'totalVat' },
					{ field: 'ticket' },
					{ field: 'bankTransfer' },
					{ field: 'monthProgress' },
					{ field: 'stampDuty' },
					{ field: 'managementFee' },
					{ field: 'tax' },
					{ field: 'vat' },
					{ field: 'other' },
					{ field: 'totalDeductions' },
					{ field: 'costTicket' },
					{ field: 'inputTax' },
					{ field: 'payable' },
					{ field: 'thisPayment' },
					{ field: 'paymentUnitId' },
					// { field: 'type' },
					{ field: 'remarks' },
				],
				beforePrintMethod: ({ content }) => {
					// 打印顶部内容模板

					const topHtml = `
            <h1 class="title">工程代扣管理费用明细表(B类)</h1>
            <div class="my-top">
              <div class="my-list-row">
                <div class="my-list-col">付款单位： ${state.selectFrom.title.contractUnit ? state.selectFrom.title.contractUnit : ''}</div>
                <div class="my-list-col my-cent">工程造价：${state.selectFrom.title.contractMoney ? state.selectFrom.title.contractMoney : ''} </div>
                <div class="my-list-col  my-right">合作单位： ${state.selectFrom.title.partner ? state.selectFrom.title.partner : ''}</div>
              </div>
              <div class="my-list-row">
                <div class="my-list-col">项目名称： ${state.selectFrom.title.contractName ? state.selectFrom.title.contractName : ''}</div>
                <div class="my-list-col"></div>
							<div class="my-list-col  my-right">经办人：${state.selectFrom.title.projectManager ? state.selectFrom.title.projectManager : ''} </div>
              </div>
            </div>
            `;
					// 拦截打印之前，返回自定义的 html 内容
					return topHtml + content + bottomHtml;
					// return content + bottomHtml;
					// return content;
				},
			});
		};

		/**
		 * @Author: lilin_:）
		 * @name: 关联表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		nextTick(() => {
			// 将表格和工具栏进行关联
			const $table = xTable1.value;
			const $toolbar = xToolbar.value;
			$table.connect($toolbar);
		});

		/**
		 * @Author: lilin_:）
		 * @name: 新增空白行
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const addDefaultBlank = () => {
			// 判断是否有项目ID
			if (!state.selectFrom.projectDataValue) {
				ElMessage.error('请查询项目后添加');
				return;
			}

			let addArry = defaultBlankData.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
						hghligHt: true,
					},
					...{ contractId: state.selectFrom.projectDataValue },
				};
			});

			let row = addArry[0];
			state.addList.unshift(row);
			state.tableData = [...state.responseData, ...state.addList];
			const $table = xTable1.value;
			$table.setActiveRow(row);
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
		};

		/**
		 * @Author: lilin_:）
		 * @name: 删除数据
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const deleteTable: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.selectTableData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.addList = state.addList.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
					state.selectTableData = [];
					state.tableData = [...state.responseData, ...state.addList];
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_deletepaymentDetail(
						reeData.map((item: any) => {
							return item.id;
						})
					);
					// console.log(code, '11111111');
					if (code == 200) {
						//  刷新
						getpaymentselList();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		const editClosedEvent: VxeTableEvents.EditClosed = ({ row, column }) => {
			if (state.selectTableData.length == 1) {
				let row = state.selectTableData[0];
				if (row.iswebAdd) {
					// 走保存接口
					axios_Addepayment(row).then((res) => {
						// console.log(res, '是否啊添加');
						if (res.code == 200) {
							getpaymentselList();
							VXETable.modal.message({ content: '新增成功!', status: 'success' });
						}
					});
				} else {
					axios_deletepaymentup(row).then((res) => {
						if (res.code == 200) {
							getpaymentselList();
							VXETable.modal.message({ content: '编辑成功！', status: 'success' });
						}
					});
				}
			} else if (state.selectTableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};
		// 展示内容
		const getSelectLabel = (value, list) => {
			let item = list.find((item) => item.id === value);
			return item ? item.name : null;
		};
		// 付款单位
		const getSelectLabel_paymentUnit = (value, list) => {
			let item = list.find((item) => item.id === value);
			return item ? item.unitName : null;
		};
		// 跳转类型
		const change_contractName = (value: any) => {
			let obt = '';
			state.playTypeFrom.shoWData.forEach((item) => {
				if (item.id == value) {
					obt = item;
				}
			});

			// console.log(toRaw(obt), 'item');
			// console.log(toRaw(value), 'value');

			if (obt.name == '利息' || obt.name == '借款') {
				let title = `${obt.name == '借款' ? `是否跳转借款明细` : `是否跳转到利息`}`;
				ElMessageBox.confirm(`${title}`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						router.push('/borrowMoney');
						// if (obt.name == '利息') {
						// 	router.push('/addressBook');
						// } else {
						// 	router.push('/borrowMoney');
						// }
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '取消跳转',
						});
					});
			}
		};

		// ----------付款方式---------------
		// 新增弹窗
		let addTypeBtn = async () => {
			let { code, obj } = await axios_payList();
			// console.log(code,'code')
			// console.log(obj,'obj')
			if (code == 200) {
				state.playTypeFrom.shoWData = obj;
				state.playTypeFrom.isshow = true;
			}
		};
		// 舒适化获取付款类型
		let getType = async () => {
			let { code, obj } = await axios_payList();
			if (code == 200) {
				state.playTypeFrom.shoWData = obj;
				console.log(toRaw(obj), 'obj');
			}
		};
		// 新增付款类型
		const addShow = () => {
			let addArry = defaultPlayDataShow.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
					},
				};
			});
			state.playTypeFrom.shoWData = JSON.parse(JSON.stringify([...state.playTypeFrom.shoWData, ...addArry]));
			// console.log(toRaw(state.tableData), '11111111111');
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
		};

		const selectAllChangeEvent1_show: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.playTypeFrom.selectData = records;
		};

		const selectChangeEvent1_show: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			state.playTypeFrom.selectData = records;
			console.log(checked ? '勾选事件' : '取消事件', records);
		};

		//实时更新弹窗
		const editClosedEvent_show: VxeTableEvents.EditClosed = ({ row, column }) => {
			// let getRow: any = row;
			if (row.iswebAdd) {
				// 走保存接口
				axios_payadd(row).then((res) => {
					// console.log(res, '是否啊添加');
					if (res.code == 200) {
						getType();
					}
				});
			} else {
				axios_payup(row).then((res) => {
					if (res.code == 200) {
						getType();
					}
				});
			}
		};

		// 弹窗删除
		const deleteTable_show: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.playTypeFrom.selectData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.playTypeFrom.shoWData = state.playTypeFrom.shoWData.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_paydel(
						reeData.map((item: any) => {
							return item.id;
						})
					);
					// console.log(code, '11111111');
					if (code == 200) {
						let { code, obj } = await axios_payList();
						if (code == 200) {
							state.playTypeFrom.shoWData = obj;
						}
					}
				}
			};
			await resDelet();
			await webDelet();
		};
		//计算小记金额
		let change_addnote = async (item: any) => {
			// 判断是否有两个值
			// if (item.stampDuty == '' || item.managementFee == '' || item.tax == '' || item.vat == '' || item.other == '') {
			// 	return;
			// }

			let { code, obj }: any = await axios_calculate_add({
				v: `${item.stampDuty},${item.managementFee},${item.tax},${item.vat},${item.other}`,
			});
			console.log(code, obj, 'code,obj');
			if (code == 200) {
				// 判断是否新增项目
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item_data: any) => {
						if (item_data.webid == item.webid) {
							item_data.totalDeductions = obj;
						}
					});
				} else {
					state.tableData.forEach((item_data: any) => {
						if (item_data.id == item.id) {
							item_data.totalDeductions = obj;
						}
					});
				}
			}

			// 执行计算2计算应付款
			await change_selValue_payable(item);
		};

		//计算管理费
		let change_managementFee = async (item: any) => {
			let { code, obj }: any = await axios_selValue_management({
				contractId: item.contractId,
				ticket: item.ticket,
				bankTransfer: item.bankTransfer,
			});
			// console.log(code, obj, 'code,obj');
			if (code == 200) {
				// 判断是否新增项目
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item_data: any) => {
						if (item_data.webid == item.webid) {
							item_data.managementFee = obj;
						}
					});
				} else {
					state.tableData.forEach((item_data: any) => {
						if (item_data.id == item.id) {
							item_data.managementFee = obj;
						}
					});
				}
			}

			await change_addnote(item);
		};

		// 计算所得税数据
		let change_selValue_Tax = async (item: any) => {
			let { code, obj }: any = await axios_selValue_Tax({
				monthProgress: item.monthProgress,
				contractId: state.selectFrom.projectDataValue,
			});

			if (code == 200) {
				// 判断是否新增项目
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item_data: any) => {
						if (item_data.webid == item.webid) {
							item_data.tax = obj;
						}
					});
				} else {
					state.tableData.forEach((item_data: any) => {
						if (item_data.id == item.id) {
							item_data.tax = obj;
						}
					});
				}
			}
			await change_addnote(item);
		};
		//计算应付款
		let change_selValue_payable = async (item: any) => {
			let { code, obj }: any = await axios_selValue_payable({
				ticket: item.ticket, //甲方付款票据
				bankTransfer: item.bankTransfer, //甲方付款银行转账
				totalDeductions: item.totalDeductions, //扣款小计
			});
			// console.log(obj, 'obj');
			if (code == 200) {
				// 判断是否新增项目
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item_data: any) => {
						if (item_data.webid == item.webid) {
							item_data.payable = obj;
						}
					});
				} else {
					state.tableData.forEach((item_data: any) => {
						if (item_data.id == item.id) {
							item_data.payable = obj;
						}
					});
				}
			}
		};

		const showAmendFun = () => {
			if (state.selectTableData.length == 1) {
				let row = state.selectTableData[0];
				row.hghligHt = true;
				const $table = xTable1.value;
				$table.setActiveRow(row);
			} else if (state.selectTableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};

		const blur_change = async (value: any) => {
			// 判断是否输入选择了项目名称
			if (!state.selectFrom.projectDataValue) {
				ElMessage.error('请查询项目后添加');
				return;
			}
			let { code }: any = await axios_saveTxt(value, { contractId: state.selectFrom.projectDataValue });
			if (code == 200) {
				ElMessage.success('更新记事本内容成功');
			}
		};

		// 添加单位的弹窗---------------------------
		// 添加通讯录
		const addUnit = () => {
			// 清空数据
			state.ressBookFrom.unitName = '';
			state.ressBookFrom.taxpayerNum = '';
			state.ressBookFrom.addressPhone = '';
			state.ressBookFrom.contactPerson = '';
			state.ressBookFrom.phone1 = '';
			state.ressBookFrom.phone2 = '';
			state.ressBookFrom.qq = '';
			state.ressBookFrom.addr = '';
			state.ressBookFrom.type = '';
			// 获取单位类型
			state.isaddressBook = true;
		};

		// 新增通讯录弹窗
		const showSubmit = async () => {
			axios_contactsAdd(state.ressBookFrom).then((res: any) => {
				if (res.code == 200) {
					state.isaddressBook = false;
					getClientSelList();
					getPlayTypeData();
				}
			});
		};

		return {
			validRules,
			showAmendFun, //编辑数据
			xToolbar, //关联表格
			xTable1, //表格
			...toRefs(state),
			change_unitName,
			searchEvent, //搜索
			resetEvent, //重置
			getpaymentselList, //付款明细查询
			printTab, //打印
			funnelEvent, //导出
			addDefaultBlank, //新增空白行
			deleteTable, //删除空白行
			editClosedEvent, //实时更新
			getSelectLabel, //处理下拉显示
			getSelectLabel_paymentUnit,
			change_contractName,

			sexList2,
			selectAllChangeEvent1,
			selectChangeEvent1,
			input: ref(''),
			footerMethod,
			// ----------新增弹窗
			addTypeBtn,
			addShow, //付款类型新增
			selectAllChangeEvent1_show,
			selectChangeEvent1_show,
			editClosedEvent_show,
			deleteTable_show,
			change_addnote, //计算扣款小记
			transitionNumber,
			rowClassName,
			change_managementFee, // 管理费
			change_selValue_Tax,
			change_selValue_payable,
			blur_change,
			// 新增单位弹窗
			addUnit,
			validRulesAddbook,
			showSubmit,
		};
	},
};
</script>

<style scoped lang="scss">
.iemt_pad {
	padding: 20px 0;
}
.mytable-style ::v-deep .vxe-body--row.row-green {
	background-color: #bbb;
	color: #fff;
}
</style>
